<template>
	<view>
		<view class="tabborder">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="delivery_list" v-if="current==0">
			<view class="delivery_item" v-for="(yzgoodsitem,yzgoodsindex) in yzgoodslist" :key="yzgoodsindex">
				<view class="delivery_itemtop">
					<image :src="yzgoodsitem.img" mode=""></image>
					<view class="delivery_edit">
						<u-icon name="edit-pen" color="#9e9d9d" @click="yzgoodsedit(yzgoodsitem.id)"></u-icon>
						<u-icon name="trash" color="#fd8080" @click="yzgoodsdel(yzgoodsitem.id)"></u-icon>
						
					</view>
				</view>
				<view class="delivery_itemcontent" @click="yzgoodsdetails(yzgoodsitem.id)">
					<view class="delivery_content">
						<text>商品名称</text><text>{{yzgoodsitem.name}}</text>
					</view>
					<view class="delivery_content">
						<text>规格</text><text>{{yzgoodsitem.gg}}</text>
					</view>
					<view class="delivery_content">
						<text>单价</text><text>¥{{yzgoodsitem.dj}}</text>
					</view>
					<view class="delivery_content">
						<text>数量</text><text>{{yzgoodsitem.num}}</text>
					</view>
					<view class="delivery_content">
						<text>总价</text><text>¥{{yzgoodsitem.zj}}</text>
					</view>
					<view class="delivery_content">
						<text>出库日期</text><text>{{yzgoodsitem.time}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="delivery_list" v-else>
			<view class="delivery_item" v-for="(goodsitem,goodsindex) in goodslist" :key="goodsindex">
				<view class="delivery_itemtop">
					<image :src="goodsitem.img" mode=""></image>
					<view class="delivery_edit">
						<u-icon name="edit-pen" color="#9e9d9d" @click="goodsedit(goodsitem.id)"></u-icon>
						<u-icon name="trash" color="#fd8080" @click="goodsdel(goodsitem.id)"></u-icon>
						
					</view>
				</view>
				<view class="delivery_itemcontent" @click="goodsdetails(goodsitem.id)">
					<view class="delivery_content">
						<text>商品名称</text><text>{{goodsitem.name}}</text>
					</view>
					<view class="delivery_content">
						<text>规格</text><text>{{goodsitem.gg}}</text>
					</view>
					<view class="delivery_content">
						<text>单价</text><text>¥{{goodsitem.dj}}</text>
					</view>
					<view class="delivery_content">
						<text>数量</text><text>{{goodsitem.num}}</text>
					</view>
					<view class="delivery_content">
						<text>总价</text><text>¥{{goodsitem.zj}}</text>
					</view>
					<view class="delivery_content">
						<text>出库日期</text><text>{{goodsitem.time}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '已租'
				}, {
					name: '已售',
				}],
				current: 0,
				goodslist:[
					{id:1,name:"某某某上衣1",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:2,name:"某某某上衣2",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:3,name:"某某某上衣3",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:4,name:"某某某上衣4",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:5,name:"某某某上衣5",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:6,name:"某某某上衣6",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:7,name:"某某某上衣7",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:8,name:"某某某上衣8",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					
				],
				yzgoodslist:[
					{id:1,name:"某某某上衣1111",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:2,name:"某某某上衣2222",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:3,name:"某某某上衣3333",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:4,name:"某某某上衣4444",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:5,name:"某某某上衣5555",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:6,name:"某某某上衣6",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:7,name:"某某某上衣7",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					{id:8,name:"某某某上衣8",dj:299,num:30,zj:8970,time:"2021-06-06",img:"../../static/image/syzyimg01.png",gg:"M码"},
					
				]
				
			}
		},
		methods: {
			change(index) {
				this.current = index;
			},
			goodsedit(id){
				uni.navigateTo({
					url:"../delivery_edit/delivery_edit?id="+id
				})
			},
			yzgoodsedit(id){
				uni.navigateTo({
					url:"../delivery_edit/delivery_edit?id="+id
				})
			},
			goodsdel(id){
				uni.showModal({
					title: '删除图片',
					 content: '确定要删除？',
					 showCancel: true,//是否显示取消按钮
					 cancelText:"否",//默认是“取消”
					 cancelColor:'skyblue',//取消文字的颜色
					 confirmText:"是",//默认是“确定”
					 confirmColor: 'skyblue',//确定文字的颜色
					 success:  (res)=> {
						if (res.cancel) {
						   //点击取消,默认隐藏弹框
						} else {
						   //点击确定
						   this.goodslist.map((item,index)=>{
						   	if(item.id == id){
						   		this.goodslist.splice(index,1)
						   	}
						   })
						}
					 },
					 fail: (res) =>{ },//接口调用失败的回调函数
					 complete:(res) =>{ },//接口调用结束的回调函数（调用成功、失败都会执行）
				})
				
			},
			goodsdetails(id){
				uni.navigateTo({
					url:"../delivery_details/delivery_details?id="+id
				})
			},
			yzgoodsdetails(id){
				uni.navigateTo({
					url:"../delivery_details/delivery_details?id="+id
				})
			},
			yzgoodsdel(id){
				uni.showModal({
					title: '删除图片',
					 content: '确定要删除？',
					 showCancel: true,//是否显示取消按钮
					 cancelText:"否",//默认是“取消”
					 cancelColor:'skyblue',//取消文字的颜色
					 confirmText:"是",//默认是“确定”
					 confirmColor: 'skyblue',//确定文字的颜色
					 success:  (res)=> {
						if (res.cancel) {
						   //点击取消,默认隐藏弹框
						} else {
						   //点击确定
						   this.yzgoodslist.map((item,index)=>{
						   	if(item.id == id){
						   		this.yzgoodslist.splice(index,1)
						   	}
						   })
						}
					 },
					 fail: (res) =>{ },//接口调用失败的回调函数
					 complete:(res) =>{ },//接口调用结束的回调函数（调用成功、失败都会执行）
				})
				
			}
		}
	}
</script>

<style>
page{
	background: #f6f6f6;
}
.tabborder{
	width: 90%;
	border-bottom: 1rpx solid #f1f0f0;
	height: 100rpx;
	padding: 0 5%;
	background-color: #fff;
}
.delivery_list{
	width: 90%;
	margin: 0 5%;
}
.delivery_item{
	background: #fff;
	margin: 20rpx 0;
	border-radius: 10rpx;
	box-shadow: 2rpx 2rpx 10rpx #eee;
	padding: 20rpx;
	padding-bottom: 0;
}
.delivery_itemtop{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.delivery_itemtop image{
	width: 150rpx;
	height: 150rpx;
	border-radius: 20rpx;
}
.delivery_edit{
	width: 150rpx;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.delivery_itemcontent{
	
}
.delivery_content{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20rpx 0;
	font-size: 28rpx;
	color: #333;
}
.delivery_content text:nth-child(1){
	
}
.delivery_content text:nth-child(2){
	/* color: #9e9e9e; */
}
.goodsadd{
	position: fixed;
	bottom: 20rpx;
	right: 20rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 100rpx;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28rpx;
}
</style>
